<template>
  <el-dialog
    title="风险场景详情"
    :visible.sync="detailVisble"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    width="65%"
  >
    <common-info-table class="until">
      <div class="header">场景信息</div>
      <div class="cell">
        <common-info-table-cell
          v-for="(i, index) in userInfo"
          :key="index"
          :label="i.label"
          :width="i.width"
        >
          <div>
            <common-tooltip-text :content="i.value"></common-tooltip-text>
          </div>
        </common-info-table-cell>
      </div>
    </common-info-table>
    <common-info-table class="until">
      <div class="header">规则信息</div>
      <div class="cell">
        <HTable
          ref="table"
          :tableData="tableData"
          :columnConfigs="columnConfigs"
          :height="300"
          :selectable="false"
          orderable
          v-loading="loading"
          :pages="pagination"
          @page-change="handlePageChange"
          @size-change="handleSizeChange"
        >
          <template slot-scope="{ row }">
            <template v-if="row.name == 'sceneId'">
              {{ $getOptionLabel(row.row.sceneId, sceneList) }}
            </template>
            <template v-else-if="row.name == 'riskField'">
              {{ $getOptionLabel(row.row.riskField, attrList) }}
            </template>
            <template v-else-if="row.name == 'ruleType'">
              {{ $getOptionLabel(row.row.ruleType, rules) }}
            </template>
          </template>
        </HTable>
      </div>
    </common-info-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">返 回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { getList } from "@/api//yybl/riskRule";
export default {
  components: {},
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {
    detailVisble: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      columnConfigs,
      sceneList: [
        {
          label: "异常时间登录",
          value: "1",
        },
        {
          label: "异常IP登录",
          value: "2",
        },
      ],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      attrList: [
        {
          label: "IP属性",
          value: "0",
        },
        {
          label: "时间属性",
          value: "1",
        },
      ],
    };
  },
  watch: {},
  computed: {
    userInfo() {
      const labels = {
        sceneName: "场景名称",
        sceneDesc: "场景描述",
      };
      return Object.keys(labels).map((i) => ({
        label: labels[i],
        width: "100%",
        value: this.row[i],
      }));
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:detailVisble", false);
      // this.detailVisble = false;
    },
    getparams() {
      return {
        sceneId: this.row.id,
      };
    },
    refresh() {
      const params = this.getparams();
      this.getlists(getList, params);
    },
  },
  created() {
    // this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-table {
  margin-top: 0;
}
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-dialog {
  min-width: 700px;
  max-width: 1100px;
  .until {
    margin-bottom: 10px;

    .header {
      height: 30px;
      display: flex;
      align-items: center;
      padding-left: 5px;
      font-size: 16px;
      color: #606266;
      border-radius: 5px 5px 0 0;
      vertical-align: middle;
    }
    .header::before {
      content: "";
      height: 14px;
      margin-right: 4px;
      width: 3px;
      background-color: #a8a8a8;
      display: inline-block;
    }
    .cell {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .global-info-table-row-wrap {
        width: 50%;
      }
      .global-info-table-row-wrap {
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      .global-info-table-row-wrap:nth-child(1) {
        border-top: 1px solid #eee;
      }
    }
    .until:last-child {
      margin-bottom: 0px;
    }
  }

  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
</style>
